<template>
    <div class="myCoupons">
      <div class="title">
        <div class="back-wrapper"><back></back></div>
        我的优惠券
        <div class="add" @click="$router.push('/addCoupons')"></div>
      </div>
      <div class="content" ref="content">
        <div class="content-container">
          <div class="line-block-item" v-for="item in couponsList" :class="{overdue:item.status!=0}">
            <div class="ball-top-left ball"></div>
            <div class="ball-top-right ball"></div>
            <div class="ball-bottom-left ball"></div>
            <div class="ball-bottom-right ball"></div>
            <div class="left">
              <h1 class="name">{{item.name}}</h1>
              <p class="introduction">{{item.introduction}}</p>
              <p class="time">有效期至:{{item.time}}</p>
            </div>
            <div class="right" :class="{isOverdue:item.status===1,isUse:item.status===2}">
              <div class="status-wrapper" >
                <div class="icon" v-if="item.type===1&&item.status===0"></div>
                <div class="count" v-if="item.type===0&&item.status===0"><a>￥</a>{{item.count}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
    export default {
        name: "myCoupons",
        mounted(){
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        },
        data(){
          return{
            couponsList:[
              {
                type:0,//0,1
                status:0,//0,1,2
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              },
              {
                type:0,//0,1
                status:1,//0,1
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              },
              {
                type:0,//0,1,2
                status:2,//0,1,2
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              },
              {
                type:1,//0,1
                status:0,//0,1,2
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              },
              {
                type:1,//0,1
                status:1,//0,1
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              },
              {
                type:1,//0,1,2
                status:2,//0,1,2
                count:10,
                name:'卧虎藏龙优惠券',
                introduction:'全国通用 | 不可和活动票叠加使用',
                time:'2018-03-23',
                addTo:'还有三天过期'
              }
            ]
          }
        },
        components:{
          'back':back
        }
    }
</script>

<style scoped lang="stylus">
  .myCoupons
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .add
        position absolute
        right 10px
        top 10px
        width 18px
        height 18px
        background url("icon_add.svg")no-repeat
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 62px)
      padding 10px
      .content-container
        .line-block-item
          position relative
          display flex
          min-height 110px
          background linear-gradient(to right, #ffcf06, #e1a21f);
          margin-bottom 10px
          &.overdue
            background #212122
          .left
            flex 1
            padding 18px 20px
            border-right 2px dashed #101011
            text-align left
            color #333333
            .name
              height 22px
              line-height 22px
              font-size 16px
              font-weight 600
            .introduction
              line-height 20px
              font-size 12px
              padding-top 15px
            .time
              height 17px
              line-height 17px
              padding-top 2px
              font-size 12px
          .right
            flex 0 0 89px
            position relative
            &.isOverdue
              background url("icon_isOverdue.svg")no-repeat center calc(100% - 20px)/63px 50px
              /*background #00b43c*/
            &.isUse
              background url("icon_isUse.svg")no-repeat center calc(100% - 20px)/63px 50px
            .status-wrapper
              position absolute
              top calc(50% - 21px)
              z-index 80
              width 100%
              text-align center
              height 42px
              color #333333
              .icon
                height 42px
                background url("icon_dy.svg")no-repeat center center
              .count
                height 42px
                font-size 30px
                line-height 42px
                a
                  color #333333
                  font-size 18px
          .ball
            position absolute
            z-index 100
            width 10px
            height 10px
            background #101011
            border-radius 5px
            &.ball-top-left
              top -5px
              left -5px
            &.ball-top-right
              right -5px
              top -5px
            &.ball-bottom-left
              bottom -5px
              left -5px
            &.ball-bottom-right
              bottom -5px
              right -5px
</style>
